<template>
  <div>
    <div v-if="groupList.length" class="container-box">
      <h3 class="title">現有群組</h3>
      <group-list v-for="(item, index) in groupList" :key="index" :item="item" @reload="getData"></group-list>
    </div>
    <el-empty v-else description="暫無數據"></el-empty>
    <el-row :gutter="10" justify="end" type="flex" class="text-right">
      <el-col :xs="12" :sm="12" :md="6" :lg="3" :xl="2"><el-button type="primary" @click="drawer = true">添加群組</el-button></el-col>
    </el-row>
    <el-drawer
      title="添加群組"
      :visible.sync="drawer"
      direction="btt"
      :wrapperClosable="false"
      ref="drawer"
      >
      <el-row :gutter="10" justify="end" type="flex" class="text-right">
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <el-input placeholder="請輸入群組名" v-model="form.groupName">
            <template slot="prepend">帳號</template>
          </el-input>
        </el-col>
        <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
          <el-button type="primary" @click="onAddAssets">確定</el-button>
          </el-col>
      </el-row>
    </el-drawer>
  </div>
</template>

<script>
import { timestampToTime } from '@/utils/tools'
import GroupList from './components/group-list'

export default {
  name: 'account-index',

  components: {
    [GroupList.name]: GroupList
  },

  data() {
    return {
      groupList: [],
      ruleForm: {//默认用户
        parentId: ''
      },
      loading: false,
      drawer: false,
      form: {//新增用
        groupName: ''
      },
    }
  },

  created() {
    let user = sessionStorage.getItem('user')
    if (user) {
      user = JSON.parse(user)
      this.ruleForm.parentId = user.id || ''
    }
  },

  mounted() {
    this.getData()
  },

  methods: {
    //获取群组列表
    getData() {
      this.loading = true
      this.$store.dispatch('account/fetchListGroup', this.ruleForm).then(res => {
        // console.log('获取群组列表')
        // console.log(res)
        this.groupList = res.result.gpsGroupList
        // if(this.groupList.length) {
        //   this.groupList.forEach(function(item) {
        //     item.time = window.Tools.timestampToTime(item.createTime)
        //   })
        // }
        this.loading = false
        // this.$message.success(res.message)
      }).catch(err => {
        this.loading = false
        this.$message.error(err)
        return false
      })
    },

    //添加群组-确认按钮
    onAddAssets() {
      this.loading = true
      this.$store.dispatch('account/fetchAddGroup', { ...this.form, ...this.ruleForm }).then(res => {
        console.log('添加群组')
        console.log(res)
        this.$message.success(res.message)
        this.form = {
          groupName: ''
        }
        //关闭抽屉
        this.drawer = false
        this.$refs.drawer.closeDrawer()
        this.getData()
        this.loading = false
      }).catch(err => {
        this.loading = false
        this.$message.error(err)
        return false
      })
    },

    //复选框内容发生改变事件
    groupAssetsChange(id) {
      this.loading = true
      this.$store.dispatch('account/fetchAddGroup', { ...this.form, ...this.ruleForm }).then(res => {
        console.log('添加群组')
        console.log(res)
        this.$message.success(res.message)
        this.form = {
          groupName: ''
        }
        //关闭抽屉
        this.drawer = false
        this.$refs.drawer.closeDrawer()
        this.getData()
        this.loading = false
      }).catch(err => {
        this.loading = false
        this.$message.error(err)
        return false
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import "../../assets/css/them.scss";

.container-box {
  padding: 10px 20px;
}

.text-right {
  padding: 0 20px;
  text-align: right;
}
</style>
